<template>
	<view class="xui-process">
		<view class="xui-process-static"><view v-if="process != 0" :style="'width:' + process + '%'" class="xui-process-active"></view></view>
	</view>
</template>

<script>
export default {
	props: {
		process: {
			type: [String, Number],
			default: '0'
		},
		color: {
			type: String,
			default: 'blue'
		}
	}
};
</script>

<style lang="scss" scoped>
.xui-process {
	position: relative;
	margin-top: 10upx;
	font-size: 0;
	width: 100%;
	height: 100%;
}

.xui-process-static {
	width: 100%;
	height: 100%;
	padding: 2upx;
	border-radius: 24upx;
	box-shadow: 0 0 5upx #bdedff;
	background-color: #bdedff;
}

.xui-process-active {
	width: 0%;
	height: 100%;
	border-radius: 10px;
	background: linear-gradient(to right, #04a3ff, #28c6ff);
	box-shadow: 1upx 1upx 1upx #57b1e5;
	transition: width 4s;
}
// .xui-process-active:after {
// 	content: '';
// 	position: absolute;
// 	top: 0;
// 	left: 0;
// 	right: 0;
// 	bottom: 0;
// 	height: 100%;
// 	border-radius: 10upx;
// 	background-image: linear-gradient(to bottom, rgba(0, 140, 213, 0.6), rgba(0, 140, 213, 0.6) 15%, transparent 60%, rgba(0, 140, 213, 0.6));
// }

/* 动画 */
@-webkit-keyframes process {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 20px 0;
	}
}
@keyframes process {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 20px 0;
	}
}
</style>
